import { computed, unref } from 'vue'
import type { HeaderSetting } from '@/types/config'

import { useAppStore } from '@/store/modules/app'
import { useFullContent } from '@/hooks/web/useFullContent'

export function useHeaderSetting() {
  const { getFullContent } = useFullContent()
  const appStore = useAppStore()

  const getShowHeader = computed(() => appStore.getHeaderSetting.show)

  const getFixed = computed(() => appStore.getHeaderSetting.fixed)

  const getShowFullHeaderRef = computed(() => {
    return !unref(getFullContent) && unref(getShowHeader)
  })
  const getUnFixedAndFull = computed(() => !unref(getFixed) && !unref(getShowFullHeaderRef))

  const getShowInsetHeaderRef = computed(() => {
    return !unref(getFullContent) && unref(getShowHeader)
  })

  // Set header configuration
  function setHeaderSetting(headerSetting: Partial<HeaderSetting>) {
    appStore.setProjectConfig({ headerSetting })
  }
  return {
    setHeaderSetting,
    getShowHeader,
    getFixed,
    getShowFullHeaderRef,
    getShowInsetHeaderRef,
    getUnFixedAndFull,
  }
}
